import usePartState from "@module/usePartState";
import './styles.css'
import Pagination from '@ui/RJMart/pagination'

export default function Table(props) {
    const {lists,totalPage,currentPage,changePage,tabIndex}=props


    return(
        <div className="bidlist-table-wrapper">
           <div className={'bidlist-table-header'}>
               <p className={'bidlist-table-p1'}>竞价商品</p>
               <p className={'bidlist-table-p2'}>品牌要求</p>
               <p className={'bidlist-table-p3'}>货号要求</p>
           </div>
            {
                lists&&lists.map((item,index)=>{
                    return(
                        <ListItem
                            key={index}
                            index={index}
                            list={item}
                            isLast={index==lists.length-1}
                            tabIndex={tabIndex}
                        />
                    )
                })
            }
            {
                totalPage>1&&(
                    <div className={'bidlist-pagination'}>
                        <Pagination
                            onChange={changePage}
                            total={totalPage}
                            pageSize={10}
                            current={currentPage} />
                    </div>
                )
            }

        </div>
    )

}


function ListItem(props) {

    const {index,list,isLast,tabIndex}=props
    const {unit,sn,endTime,id}=list
    return(
        <div className={isLast? '':'bidlist-listitem'}>
            <div className={'bidlist-item-header'}>
                <div className={'bidlist-item-header-left'}>
                    <p className={'bidlist-item-header-name'}>{unit} - {sn}</p>
                    <p className={'bidlist-item-header-time'}>结束时间：{endTime}</p>
                </div>
                <p
                    onClick={()=>{
                        $state.go({
                            stateName: "/bidDetail",
                            params: {
                                id:id,
                            }
                        })
                    }}
                    className={'bidlist-item-header-detail'}>详情</p>
            </div>
            {
                list&&list.items&&list.items.map((obj,idx)=> {
                    const {itemName,brand,itemNo}=obj
                    return(
                        <div
                            key={`${index}-${idx}`}
                            className={'bidlist-item-rows'}>
                            <p className={'bidlist-item-row-p1'}>{itemName}</p>
                            <p className={'bidlist-item-row-p2'}>{brand||'/'}</p>
                            <p className={'bidlist-item-row-p3'}>{itemNo||'/'}</p>
                        </div>
                     )

                })
            }


        </div>
    )
}